<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' show-count :maxlength="50"  />
        </a-form-item>
        <a-form-item label='编码' name='code' :rules="[{required : true, message : '请填写编码'}]">
            <a-input v-model:value='formData.code' show-count :maxlength="50" />
        </a-form-item>
        <a-form-item label='价格' name='price'>
            <a-input-number type='number' :min="0" v-model:value='formData.price'>
                <template #addonAfter>USDT</template>
            </a-input-number>
        </a-form-item>
        <a-form-item label='有效期' name='expire'>
            <a-input-number type='number' :min="1" v-model:value='formData.expire'>
                <template #addonAfter>
                    <a-select v-model:value="formData.expireType" style="width: 70px" :options="expireTypes">

                    </a-select>
                </template>
            </a-input-number>
        </a-form-item>
        <a-form-item label='备注' name='remark'>
            <a-input v-model:value='formData.remark' show-count :maxlength="50" />
        </a-form-item>
        <a-form-item label='排序' name='sort'>
            <a-input-number type='number' :min="1" v-model:value='formData.sort' />
        </a-form-item>
        <a-form-item label='启用' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='启用' un-checked-children='禁用'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
        import { saveApi } from '@/api/UserGroup';
import { generateCodeFromUid, recursionFn } from '@/utils';
        import { ref } from 'vue';
import { useI18nStore } from '@/store/i18n';
import { Modal } from 'ant-design-vue';
import { uploadIconApi } from '@/api/Upload';
import { expireTypeApi } from '@/api/Common';

    const i18n = useI18nStore()

    const props = defineProps<{
        row? : any;
        parentId:number;
    }>()

    const expireTypes = ref<any[]>([])

    const formRef = ref()

    
    const formData = ref({
        id : 0,
        code : '',
        name : '',
        price : '',
        expire : '',
        remark : '',
        sort : 1,
        expireType: '',
        enable : true,
    })


    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                formData.value[k] = props.row[k]
            }
        }

        
    }




    async function submit() {
        await formRef.value.validate()
        let params = {...formData.value}
        if('sort' in params && params.sort === '') {
            params.sort = 1
        }


        return saveApi(params)
    }


    expireTypeApi().then(r => {
        for(let k in r) {
            expireTypes.value.push({
                value: Number(k),
                label: r[k]
            })
        }

        if(!formData.value.expireType) {
            formData.value.expireType = expireTypes.value[expireTypes.value.length - 1].value
        }
        
    })

    
    defineExpose({
        submit
    })
</script>